<template>
    <div class='container'>
        <div class="header">


            <div class="collection-selection">
                <t-select @change="handleChange">
                    <t-option v-for="item in collections" :label="item.name" :value="item.name" size="small">
                    </t-option>
                </t-select>
            </div>
            <div class="collection-contral">
                <div class="item">
                    <t-button theme="success" @click="handleGetCollectionDetail">查询集合详情</t-button>
                </div>
                <div class="item">
                    <t-button theme="success" @click="handleGetCollectionData">获取数据</t-button>
                </div>
            </div>

        </div>
        <div class="content">
            <div>
                {{ collection_detail }}
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import { getCollectionsAPI, getCollectionDetailAPI } from '@/api/qdrant';

const collections = ref<any[]>([]);
const current_collection = ref<any>(null);
const collection_detail = ref<any>(null);
const handleChange = (val: any) => {
    current_collection.value = val;
}

const handleGetCollectionDetail = async () => {
    const res = await getCollectionDetailAPI(current_collection.value);
    console.log(collections);
    collection_detail.value = res
}

const handleGetCollectionData = async () => {
    // const res = await getCollectionDataAPI(current_collection.value);
    // console.log(res);
}
onMounted(async () => {
    const res = await getCollectionsAPI();
    console.log(collections);
    collections.value = res.collections
})

</script>
<style lang='scss' scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .collection-contral {
        display: flex;

        .item {
            margin-right: 10px;
        }
    }
}
</style>
